@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/.container {
    width: 100%;
    height: calc(100% - 1.2rem);
    position: relative;
    header {
        width: 100%;
        height: pxToRem(30);
        padding-top: pxToRem(10);
        // ul {
        //     list-style: none;
        //     display: flex;
        //     width: calc(100% - 0.8rem);
        //     margin: 0 auto;
        //     justify-content: flex-start;
        //     align-items: center;
        //     li {
        //         cursor: pointer;
        //         // width: pxToRem(200);
        //         margin-right: pxToRem(20);
        //         text-align: center;
        //         color: #48a2ee;
        //         font-size: pxToRem(16);
        //         height: pxToRem(30);
        //         line-height: pxToRem(30);
        //     }
        //     .active {
        //         color: #badaf7;
        //     }
        // }
        .tabs{
            width: calc(100% - 0.8rem);
            height: 0.3rem;
            margin:  0 auto;
            list-style: none;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border: pxToRem(1) solid #47A1EE;
            .ivu-tabs{
                width: 100%;
                color: #47a1ee;
            }
            .ivu-tabs-bar{
                padding: 0;
                box-sizing: border-box;
                border-bottom: none;
                margin: 0;
                .ivu-tabs-ink-bar{
                    background-color: transparent;
                }
                /deep/ .ivu-tabs-nav {
                    .ivu-tabs-tab{
                        color: #48a2ee;
                        height: pxToRem(30);
                        font-size: pxToRem(16);
                        line-height: pxToRem(30);
                        padding: 0 !important;
                        box-sizing: border-box !important;
                    }
                }
                .ivu-tabs-tab{
                    box-sizing: border-box;
                    &:hover{
                        color: #badaf7;
                    }
                    &.ivu-tabs-tab-active{
                        color: #badaf7;
                    }
                }
                .ivu-tabs-nav-prev,
                .ivu-tabs-nav-next{
                    height: pxToRem(30);
                    font-size: pxToRem(16);
                    line-height: pxToRem(30);
                    margin-top: pxToRem(7);
                    padding: 0 !important;
                    color: #48a2ee;
                }
                .ivu-tabs-nav-prev{
                    left: pxToRem(-5);
                }
                .ivu-tabs-nav-next{
                    right: pxToRem(-5);
                }
            }
        }
    }
    .content {
        width: 100%;
        margin-top: pxToRem(10);
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .item_msg {
            width: calc(100% - 0.8rem);
            height: pxToRem(140);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            ul {
                width: 100%;
                height: 100%;
                list-style: none;
                display: flex;
                justify-content: flex-start;
                li {
                    width: 10%;
                    height: 100%;
                    background-image: url(./../../assets/images/board/common/env_11.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                    margin-right: pxToRem(20);
                    .left {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        width: 50%;
                        height: 100%;
                        .img1 {
                            width: pxToRem(36);
                            height: pxToRem(36);
                            margin-top: pxToRem(20);
                        }
                        .img2 {
                            width: pxToRem(86);
                            height: pxToRem(50);
                            margin-top: pxToRem(-40);
                        }
                        span {
                            color: #b9defc;
                            font-size: pxToRem(16);
                            margin-top: pxToRem(10);
                        }
                    }
                    .right {
                        width: 50%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: center;
                        span {
                            color: #b9defc;
                            font-size: pxToRem(16);
                            margin-bottom: pxToRem(20);
                        }
                        .num {
                            font-size: pxToRem(26);
                            color: #fede08 !important;
                            font-family: "Gothic" !important;
                            margin-right: pxToRem(5);
                        }
                    }
                }
                .active {
                    background-image: url(./../../assets/images/board/common/env_12.png) !important;
                }
            }
        }
        .item_chart {
            width: calc(100% - 0.8rem);
            height: pxToRem(365);
            margin: 0 auto;
            background-image: url(./../../assets/images/board/common/env_13.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: pxToRem(10);
            position: relative;
            .top {
                width: 99%;
                margin: 0 auto;
                height: pxToRem(38);
                margin-top: pxToRem(10);
                background-image: url(./../../assets/images/board/common/board_img1.png);
                background-size: 100% pxToRem(38);
                background-repeat: no-repeat;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-left: pxToRem(10);
                .span1 {
                    width: pxToRem(5);
                    height: pxToRem(8);
                    background: #0c89f7;
                    margin-right: pxToRem(5);
                    animation: mymove1 1s infinite;
                    -webkit-animation: mymove1 1s infinite;
                }
                .span2 {
                    width: pxToRem(5);
                    height: pxToRem(16);
                    background: #0c89f7;
                    margin-right: pxToRem(5);
                    // animation:mymove2 1s infinite;
                    // -webkit-animation:mymove2 1s infinite;
                }
                .span3 {
                    width: pxToRem(5);
                    height: pxToRem(24);
                    background: #0c89f7;
                    margin-right: pxToRem(5);
                    animation: mymove3 1s infinite;
                    -webkit-animation: mymove3 1s infinite;
                }
                .left_sub {
                    color: #b9ddfc;
                    font-size: pxToRem(16);
                }
                .warn {
                    color: #fb0606;
                    font-size: pxToRem(16);
                    margin-left: pxToRem(15);
                    height: pxToRem(38);
                    display: flex;
                    align-items: center;
                    .num {
                        font-size: pxToRem(30);
                        font-family: "Gothic" !important;
                        margin-left: pxToRem(10);
                    }
                }
            }
            .radius {
                position: absolute;
                top: 0;
                left: 0;
                width: pxToRem(10);
                height: pxToRem(10);
                background: #4c83ff;
                border-radius: 50%;
                animation: mymove2 2s infinite;
                -webkit-animation: mymove2 2s infinite;
            }
            .top1 {
                background-image: none !important;
                .tag {
                    width: pxToRem(160);
                    height: pxToRem(30);
                    border-radius: pxToRem(10);
                    border: pxToRem(1) solid rgba(0, 118, 220, 1);
                    margin-left: pxToRem(20);
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    .box1 {
                        width: pxToRem(80);
                        height: 100%;
                        border-radius: pxToRem(9) pxToRem(0) pxToRem(0)
                        pxToRem(9);
                        text-align: center;
                        line-height: pxToRem(30);
                        font-size: pxToRem(14);
                        color: #b9defc;
                    }
                    .box2 {
                        width: pxToRem(80);
                        height: 100%;
                        border-radius: pxToRem(0) pxToRem(9) pxToRem(9)
                        pxToRem(0);
                        text-align: center;
                        line-height: pxToRem(30);
                        font-size: pxToRem(14);
                        color: #b9defc;
                    }
                    .active {
                        background: rgba(0, 118, 220, 1);
                    }
                }
                .warn {
                    color: #fb0606;
                    font-size: pxToRem(16);
                    margin-left: pxToRem(15);
                    height: pxToRem(38);
                    display: flex;
                    align-items: center;
                    .num {
                        font-size: pxToRem(30);
                        font-family: "Gothic" !important;
                        margin-left: pxToRem(50);
                    }
                }
            }
            .bottom {
                width: 100%;
                height: pxToRem(327);
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    width: 70%;
                    height: 100%;
                    #wind {
                        width: pxToRem(1276);
                        height: pxToRem(327);
                    }
                    #line {
                        width: 100%;
                        height: 100%;
                    }
                }
                .right {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    #pie {
                        width: 60%;
                        height: 100%;
                    }
                    ul {
                        width: 40%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        li {
                            width: 90%;
                            height: 10%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            cursor: pointer;
                            em {
                                width: pxToRem(10);
                                height: pxToRem(10);
                                border-radius: 50%;
                                // margin-right: pxToRem(20);
                            }
                            span {
                                color: #f2f2f2;
                                margin-left: pxToRem(15);
                            }
                        }
                    }
                }
            }
            .bottom1 {
                width: 100%;
                height: pxToRem(327);
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    width: 20%;
                    height: 100%;
                    #warnPie {
                        width: 100%;
                        height: 100%;
                    }
                }
                .center {
                    width: 15%;
                    height: 100%;
                    ul {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        li {
                            width: 90%;
                            height: 10%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            cursor: pointer;
                            em {
                                width: pxToRem(10);
                                height: pxToRem(10);
                                border-radius: 50%;
                                // margin-right: pxToRem(20);
                            }
                            span {
                                color: #f2f2f2;
                                margin-left: pxToRem(15);
                            }
                        }
                    }
                }
                .right {
                    width: 65%;
                    height: 100%;
                    #warnLine {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
a {
    color: #737373 !important;
}
.list svg path:first-child {
    stroke: #2b2cb4 !important;
}
.no_data {
    width: 100%;
    height: pxToRem(900);
    line-height: pxToRem(900);
    text-align: center;
    font-size: pxToRem(48);
    color: rgba(0, 255, 255, 1);
}
@keyframes mymove1 {
    from {
        height: 0.08rem;
    }
    to {
        height: 0.24rem;
    }
}
@keyframes mymove3 {
    from {
        height: 0.24rem;
    }
    to {
        height: 0.08rem;
    }
}
@keyframes mymove2 {
    from {
        left: 0;
        opacity: 1;
    }
    to {
        left: 2rem;
        opacity: 0;
    }
}
@-webkit-keyframes mymove1 {
    from {
        height: 0.08rem;
    }
    to {
        height: 0.24rem;
    }
}
@-webkit-keyframes mymove3 {
    from {
        height: 0.24rem;
    }
    to {
        height: 0.08rem;
    }
}
@-webkit-keyframes mymove2 {
    from {
        left: 0;
        opacity: 1;
    }
    to {
        left: 2rem;
        opacity: 0;
    }
}
.notclick {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //css滤镜代码
    cursor: not-allowed !important;
}